<template>
    <div class="you">
        <div class="imglist">
            <div class="imgleft">
                <img :src="img[0].smallimg1" alt="">
            </div>
            <div class="imgright">
                <img :src="img[0].largeimg" alt="">
                <img :src="img[0].smallimg1" alt="">
            </div>
        </div>
        <div class="navlist">
            <div class="nav1">
                <h2>{{name}}<span>{{status[0].statu1}}</span><span>{{status[0].statu2}}</span></h2>
                <h3>{{price2}}<span>元/平</span></h3>
            </div>
            <h4>{{houseSubtitle}}</h4>
            <div class="nav2">
                <p>{{houseDesc}}</p>
            </div>
            <div class="nav3">
                <div class="nav31">
                    <div class="nav-left">
                        <img :src="people" alt="">   
                    </div>
                    <div class="nav-right">
                        <h4>{{pemane}}</h4>
                        <p>661人咨询过他</p>
                    </div>
                </div>
                <div class="nav32"><img src="kandian/6.png" alt=""></div>
                <div class="nav33"><img src="kandian/7.png" alt=""></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
     props:[
      "name","img","pemane","price2","status","houseDesc","people","houseSubtitle"
  ]
}
</script>
<style  scoped>
    .you{
        width:90%;
        height:3.3rem;
        margin:0.16rem auto;
        border-radius:0.05rem;
        border:0.01rem solid #efefef;
        box-shadow:0rem 0.01rem 0.11rem 0.02rem #eeeeee;
    }
    .imglist{
        width:100%;
        height:1.37rem;
        display:flex;
        justify-content:space-between;
    }
     .imglist .imgleft{
        width:67%;
        height:1.37rem;
    }
    .imglist .imgright{
        width:32.4%;
        height:1.37rem;
    }
    .imgleft img{width:100%;height:1.37rem;}
    .imgright img{width:100%;height:0.685rem;}
    .navlist{
        width:90%;
        height:1.6rem;
        display:flex;
        margin:0.1rem auto;
        flex-direction:column;
        justify-content: space-around;
    }
    .nav1{
        height:0.18rem;
        width:100%;
        display:flex;
        justify-content: space-between;
    }
    .nav1 h2{
        font-size:0.16rem;
        font-weight:900;
    }
    .nav1 h2 span{
        display:inline-block;
        font-size:0.1rem;
        font-weight:500;
        margin-left:0.04rem;
        border:0.01rem solid #aaa;
        padding:0.02rem;
        border-radius:0.05rem;
    }
    .nav1 h3{
        font-size:0.14rem;
        font-weight:700;
        color:#d21a00;
    }
    h4{
        font-size:0.12rem;
    }
    .nav2{
        height:0.3rem;
        width:100%;
        overflow: hidden;
    }
    .nav2 p{
        font-size:0.12rem;
    }
    .nav3{
        height:0.38rem;
        width:100%;
        display:flex;
        justify-content:space-between;
    }
    .nav3 img{
        width:0.4rem;
    }
    .nav-left{
        border-radius: 50%;
        float: left;
        overflow: hidden;
    }
    .nav31{
        width:43%;
         display:flex;
        justify-content:space-between;
    }
    .nav-right h4{
        font-size:0.14rem;
    }
    .nav-right p{
        font-size:0.12rem;
    }
    .nav32{
        margin-left:0.56rem;
    }
</style>